<template>
  <div>
    <a-row style="padding-bottom: 10px;">
      <a-col :xs="6" :sm="6" :md="6" :lg="6" style="padding-right: 5px">
        <a-select v-model="config.endpoint.type">
          <a-select-option v-for="(item, index) in endpoints()" :value="index" :key="index">{{ item }}</a-select-option>
        </a-select>
      </a-col>
      <a-col :xs="1" :sm="1" :md="1" :lg="1" style="text-align:center;padding-right: 5px">为</a-col>
      <a-col :xs="8" :sm="8" :md="8" :lg="8" style="padding-right: 5px">
        <a-select v-model="config.endpoint.event" @change="changeEvent">
          <a-select-option
            v-if="hasEvent(item.name)"
            v-for="item in events"
            :value="item.name"
            :key="item.name"
          >{{ item.displayName }}</a-select-option>
        </a-select>
      </a-col>
      <a-col :xs="9" :sm="9" :md="9" :lg="9" style="padding-right: 5px">
        <a-button @click="addRule">添加筛选</a-button>
      </a-col>
    </a-row>
    <MultiLevelFilter ref="filter" v-model="config.endpoint.filter" v-bind:datasourceId="datasourceId" v-bind:properties="properties" v-on:remove="demote"></MultiLevelFilter>
  </div>
</template>

<script>
import MultiLevelFilter from "@/views/components/Filter/MultiLevelFilter.vue"; // 引入新版级联筛选组件
export default {
  name: "EndpointEvent",
  components: {
    MultiLevelFilter
  },
  props: {
    config: Object,
    events: Array,
    properties: Array,
    datasourceId: {
      type: Number,
      default: null
    },
  },
  data: function() {
    return {
      tree_show: false,
      config_num: 0
    };
  },
  mounted() {
    // 对树形组件的数据进行标准化处理
    let obj = this.config.endpoint.filter;
    if (obj.condition && obj.rules.length > 1) {
      this.tree_show = true;
    }
    // 对树形组件进行展示，并且更改数据格式
    if (obj.condition && obj.rules.length == 1) {
      this.config.endpoint.filter = {
        key: obj.rules[0].key,
        Hierarchy: 1, // 逻辑层级
        property: obj.rules[0].property, // 事件属性名称
        operator: obj.rules[0].operator, // 操作符
        value: obj.rules[0].value, // 事件属性值
        values: obj.rules[0].values // 事件属性值数组
      };
      this.tree_show = true;
    }
    // 树形组件为空筛选条件
    if (obj.condition && obj.rules.length == 0) {
      this.tree_show = false;
    }
    // 当前树形组件筛选条件为单条
    if (obj && !obj.condition) {
      this.config.endpoint.filter = {
        key: obj.key,
        Hierarchy: obj.Hierarchy, // 逻辑层级
        property: obj.property, // 事件属性名称
        operator: obj.operator, // 操作符
        value: obj.value, // 事件属性值
        values: obj.values // 事件属性值数组
      };
      this.tree_show = true;
    }
  },
  methods: {
    //条件组降级：如果条件组只剩一个条件，那么移除当前条件组，将剩下的这个条件合并到上级条件组中。
    demote: function (index) {
      let originalFilter = this.config.endpoint.filter;
      let filterIndex = originalFilter.filters.findIndex((item) => {
        return item.index === index;
      });
      if(filterIndex !== -1) {
        let filter = originalFilter.filters[filterIndex];
        originalFilter.filters.splice(filterIndex, 1);
        originalFilter.condition = filter.condition;
        filter.rules.forEach((item, index) => {
          originalFilter.rules.push(item);
        });
        filter.filters.forEach((item, index) => {
          originalFilter.filters.push(item);
        });
      }
    },
    addRule() {
      this.$refs.filter.addRule();
    },
    endpoints: function() {
      return ["起始事件", "结束事件"];
    },
    changeEvent: function(selectedValue) {},
    hasEvent: function(event) {
      return this.config.events.indexOf(event) !== -1;
    },
    addFilterItem: function() {
      this.config.endpoint.filter = {
        key: Math.random()
          .toString(36)
          .substr(2),
        Hierarchy: 0, // 逻辑层级
        property: "", // 事件属性名称
        operator: "", // 操作符
        value: "", // 事件属性值
        values: [] // 事件属性值数组
      };
      this.tree_show = true;
    },
    change_all(b, obj) {
      if (b) {
        // 组件消失
        this.config.endpoint.filter = null;
        this.tree_show = false;
      } else {
        // 组件数据更改
        this.config.endpoint.filter = obj;
      }
    }
  }
};
</script>

<style scoped>
</style>